<template>
    <div>
        <div class="title">
            <title-dom title="用户登录"></title-dom>
        </div>
        <div class="tabs">
            <tabs-dom :tab="tabs"></tabs-dom>
        </div>
        <div class="form-groups">
            <div class="form-group">
                <div class="ipt-title">
                    <span class="input-title">手机号</span>
                    <span class="forgotPassword"></span>
                </div>
                <my-input type1="text" value="请输入手机号" class="myinput" :rule="rulesPhone" :error="phoneError"
                    @message="(e) => { form.phone = e }"></my-input>
            </div>
            <div class="form-group">
                <div class="ipt-title">
                    <span class="input-title">验证码</span>
                    <span class="forgotPassword" @click="$router.push('/changePassword')">忘记密码</span>
                </div>
                <code-dom type1="text" :mobilePhone="form.phone" value="请输入验证码" class="myinput" :rule="rulesPassword"
                    @EmptyPhone="EmptyPhones" @message="(e) => { form.code = e }"></code-dom>
            </div>
        </div>
        <el-button class="login" @click="login">登录</el-button>
        <p class="register" @click="$router.push('/register')">立即注册</p>

        <div class="form-set">
            <div class="checkbox-group">
                <check-box :value="3" @message="(e) => { automaticLogin = e }" :history="automaticLogin"></check-box>
                <span class="checkbox-text">自动登录</span>
            </div>
            <div class="checkbox-group">
                <check-box :value="4" @message="(e) => { privacy = e }"></check-box>
                <span class="checkbox-text">同意使用<i class="privacy">隐私条款</i></span>
            </div>
        </div>

        <div class="other-type">
            <other-login></other-login>
        </div>
    </div>
</template>

<script>
import myInput from '@/components/common/account/components/inputRule.vue';
import checkBox from "@/components/common/account/components/checkBox.vue";
import otherLogin from "@/components/common/account/components/otherLogin.vue"
import titleDom from "@/components/common/account/components/title.vue"
import tabsDom from "@/components/common/account/components/tabs.vue"
import codeDom from "@/components/common/account/components/code.vue";
export default {
    components: {
        myInput,
        checkBox,
        otherLogin,
        titleDom,
        tabsDom,
        codeDom
    },
    data() {
        return {
            tabs: [{
                name: "账号登录",
                to: "/login/passwordLogin"
            },
            {
                name: "验证码登录",
                to: "/login/smsVerificationLogin"
            }
            ],
            automaticLogin: this.$store.state.automaticLogin,
            form: {
                phone: '',
                code: ''
            },
            phoneError: "",
            privacy: false
        }
    },
    methods: {
        EmptyPhones(value) {
            if (value === 'EmptyPhone')
                this.phoneError = "手机号不能为空"
        },
        login() {
            if (!this.privacy) {
                this.$toast('请先勾选隐私条款', 2000, 'normal');
                return
            }
            if (this.form.phone && this.form.code) {
                this.$store.dispatch('phoneCode', this.form)
            } else {
                this.$toast('请将信息填写完整', 2000, 'warning');
            }
        }
    },
    computed: {
        rulesPhone() {
            return {
                trigger: 'blur',
                max: 11,
                num_message: '手机号格式错误',
                req_message: '手机号不能为空',
                required: true,
                reg: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
                reg_message: '手机号格式错误'
            }
        },
        rulesPassword() {
            return {
                trigger: 'blur',
                min: 1,
                max: 6,
                num_message: '验证码格式错误',
                req_message: '验证码不能为空',
                required: true,
            }
        }
    },
    watch: {
        automaticLogin(newVal, oldVal) {
            this.$store.commit('setAutomaticLogin', newVal)
        }
    }
}
</script>

<style lang="less" scoped>
.tabs {
    margin-top: 1.07rem;
    margin-bottom: 1.6rem;
}

.title {
    margin-top: 1.6rem;
}

.form-groups {
    width: 16rem;
    height: 8.32rem;
}

.input-title {
    height: 0.96rem;
    font-size: 0.59rem;
    font-family: 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei';
    font-weight: normal;
    color: #212121;
    line-height: 0.96rem;
}

.forgotPassword {
    height: 0.96rem;
    font-size: 0.59rem;
    font-family: 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei';
    font-weight: normal;
    color: #68656C;
    line-height: 0.96rem;
    text-decoration: underline;
}

.ipt-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.form-group {
    margin-bottom: 0.53rem;
}

.login {
    width: 16rem;
    height: 1.92rem;
    background: linear-gradient(315deg, rgba(38, 87, 255, 0.75) 0%, rgba(159, 34, 255, 0.75) 100%);
    border-radius: 0.21rem;
    backdrop-filter: blur(10px);

    :deep(span) {
        height: 0.96rem;
        font-size: 0.64rem;
        font-family: 'IdeaFonts-DianHei-CEJ, IdeaFonts-DianHei';
        font-weight: normal;
        color: #FFFFFF;
        line-height: 0.96rem;
    }
}

.register {
    height: 0.96rem;
    font-size: 0.59rem;
    font-family: 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei';
    font-weight: normal;
    color: #7709CC;
    line-height: 0.96rem;
    text-align: center;
    margin-top: 0.53rem;
}

.form-set {
    width: 16rem;
    margin-top: 0.59rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .checkbox-group {
        display: flex;
        align-items: center;

        .checkbox-text {
            margin-left: 0.43rem;
            height: 0.96rem;
            font-size: 0.59rem;
            font-family: 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei';
            font-weight: normal;
            color: #212121;
            line-height: 0.96rem;
        }

        .privacy {
            font-style: normal;
            color: #7709CC;
            text-decoration: underline;
        }
    }
}

.other-type {
    margin-top: 0.85rem;
}
</style>